<script>
export default {
    name: 'ZxTag',
    props: {
        text: String,
        closable: Boolean,
        type: String,
        hit: Boolean,
        disableTransitions: Boolean,
        color: String,
        size: String,
        effect: {
            type: String,
            default: 'light',
            validator(val) {
                return ['dark', 'light', 'plain'].indexOf(val) !== -1;
            },
        },
    },
    computed: {
        tagSize() {
            return this.size || (this.$ELEMENT || {}).size;
        },
    },
    methods: {
        handleClose(event) {
            event.stopPropagation();
            this.$emit('close', event);
        },
        handleClick(event) {
            this.$emit('click', event);
        },
    },
    render(h) {
        const { type, tagSize, hit, effect } = this;
        const classes = [
            'zx-tag',
            type ? `zx-tag--${type}` : '',
            tagSize ? `zx-tag--${tagSize}` : '',
            effect ? `zx-tag--${effect}` : '',
            hit && 'is-hit',
        ];
        const tagEl = (
        <span
          class={ classes }
          style={{ backgroundColor: this.color, display: 'flex', alignItems: 'center' }}
          on-click={ this.handleClick }>
          <span>{ this.$slots.default }</span>
          {
            this.closable && <i class="zx-tag__close zx-icon-close-circle-fill" on-click={ this.handleClose }></i>
          }
        </span>
        );

        return this.disableTransitions ? tagEl : <transition name="zx-zoom-in-center">{ tagEl }</transition>;
    },
};
</script>
